<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../../public/css/public.css" media="all" />
	<style>
		@media(max-width: 1440px){.img{display: none}}
	</style>
</head>

<body class="childrenBody">

	<fieldset class="layui-elem-field">
		<legend>前言</legend>
		<div class="layui-field-box">
			<div class="layui-col-lg10 layui-col-md-12">
				布局是前端开发的一个基本功，从最经典的定位和浮动，到现在的流式布局、自适应、响应式、弹性布局，可以说是百家争鸣百花齐放了。
				<br>不管怎么变化，根本原因都是技术在进步，如果我们不想落伍，就要不停追赶新的技术。
				<br>后台页面作为和后台程序一样的奇葩，更新换代的节奏稍微慢了点，但在前端技术日新月异的今天，也都逐步在改变风格，改变框架，甚至改变技术。
				<br><br>灰常荣幸的说，我们的后台页面，在各位先进的带领下，也算是走在了市场的前沿，等待检验我们的仅仅是时间~
			</div>
			<div class="layui-col-lg2 img">
				<img src="../../../public/images/layui.png" width="100%">
			</div>
		</div>
	</fieldset>

	<div class="layui-col-md12">
		<img src="../../../public/images/html.jpg" style="float: left; width: 600px; max-width: 100%; margin:10px 10px 20px 0;">

		<h3><i class="iconfont icon-shoucanggaojing" style="font-size: 66px; color:teal;"></i>我们选择的这套框架，前端技术并不高级，但足够简单足够用，诚如其官网所言：</h3>
		<br>“遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用；区别于常见的基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。”
		<br>“更多是为服务端程序员量身定做，无需涉足各种前端工具的复杂配置，只需面对浏览器本身。”
		<br><br>如图，红色框内为最基本的页面配置，就layui的两个文件，再加上一个基本的jq和我们定制的样式表（别的兼容我也不知道干嘛的~）
		<br><br>我们一般推荐css写在&lt;/head&gt;前面，js写在&lt;/body&gt;前面，方便查找和后期维护；此外再提醒一下子页面别忘了加“childrenBody”（我也很无奈~）
	</div>
	<div>
		<h3>然后就要用到我们的“栅格大法”了~！</h3>
		栅格就是类似我们生活中常见的“篱笆”，网页设计有很多种方案，但总逃离不了一些原则：如二八原则，黄金分割等；
		如果能在遵循这些设计规则的前提下，将网页分成块，每次拿来主义，将会很大程度的减少前端开发的工作量。
		<br>栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
		<br>栅格系统运用的最广泛的就是“Bootstrap”，但是“Bootstrap”并不是栅格系统的鼻祖；不过有他的存在，栅格系统似乎有了一套行业内可参考的标准。
		<br><br>“Layui”的布局原理其实也是类似“Bootstrap”，不过她相比“Bootstrap”又有了一些高明的地方，比如取消了左右的内间距，不用再去纠结间距太宽导致页面松散。
		<a style="color: red;">布局的div仅仅是布局的div，和其他的div完全没有干扰~</a>
		<br>相关layui栅格的介绍传送门：<a href="https://www.layui.com/doc/element/layout.html" style="color: #01AAED;">栅格系统与后台布局</a>
		
		<h3><br>PS~以前我们的表格布局，从上往下依次是搜索、功能按钮及表格，随着新版layui头部工具栏的加入，我们将会把功能按钮合并进表格，开发时新旧版都可以使用，我们一起等待时间的见证！</h3>
	</div>

	<script type="text/javascript" src="../../../public/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../public/layui/layui.js"></script>
</body>
</html>